<script setup lang="ts">
import DevSearchForm from '../../DevSearchForm/index';
import DevSearchTable from '../../DevSearchTable/index';
import {computed, ref, useSlots} from 'vue';
import {devFormTableProps} from './formTable'
import {devGetFilteredProps} from '@/utils'

const props = defineProps(devFormTableProps)
const emit = defineEmits(['search','reset','check-change', 'sort-table-change','result'])
const slots = useSlots();

const excludedKeys = ['query']; // 需要剔除的参数

/**
 * 点击查询按钮
 */
const clickSearch = () => {
  if (devSearchTableRef.value) {
    devSearchTableRef.value.currentChange(1);
    emit('search');
  }
};
/**
 * 点击重置按钮
 */
const clickReset = () => {
  if(devSearchFormRef.value) {
    // 当开启重置时重新请求接口
    if (props.isResetBtnRequest) {
      devSearchTableRef.value.resetTableList();
    }
    // 当关闭重置时请求接口,且清空表格数据
    if(!props.isResetBtnRequest && props.isResetBtnClearTable){
      devSearchTableRef.value.forceUpdateTableData([]);
    }
  }
  emit('reset');
};

const slotsClassification = computed(() => {
  const searchFormSlots = new Set<string>();
  const searchTableSlots = new Set<string>();

  Object.keys(slots).forEach((item) => {
    if (item.includes('s-') || item === 'search-button') {
      searchFormSlots.add(item);
    } else {
      searchTableSlots.add(item);
    }
  });

  return {
    searchFormSlots: Array.from(searchFormSlots),
    searchTableSlots: Array.from(searchTableSlots),
  };
});


/**
 * 获取插槽信息
 */
const getSlot = (type: string) => {
  if (type === 'dev-search-form') {
    return slotsClassification.value.searchFormSlots;
  } else {
    return slotsClassification.value.searchTableSlots;
  }
};

/**
 * 获取结果后
 */
const result = (res:any)=>{
  emit('result',res);
}

/**
 * 勾选发生改变
 */
const checkChange = (res:any)=>{
  emit('check-change', res);
}

/**
 * 排序发生改变
 */
const sortTableChange = (res:any)=>{
  emit('sort-table-change', res);
}


/*************************** table组件中向外抛出的方法同步抛出到最外层start ****************************/
const devSearchTableRef = ref<any>();
const devSearchFormRef = ref<any>(null)

// 向外抛出可用的方法
defineExpose({
  devSearchFormRef,
  devSearchTableRef
});

defineOptions({
  name: 'DevFormTable',
  inheritAttrs: false
});

</script>

<template>
  <dev-search-form ref="devSearchFormRef" v-bind="{...props.searchForm}" @search="clickSearch" @reset="clickReset">
    <template v-for="itemSlot in getSlot('dev-search-form')" :key="itemSlot" v-slot:[itemSlot]="temp">
      <slot :name="itemSlot" v-bind="temp"></slot>
    </template>
  </dev-search-form>
  <slot name="form-table-center"/>
  <dev-search-table
      ref="devSearchTableRef"
      :style="{ marginTop: '20px' }"
      v-bind="{...devGetFilteredProps(props.searchTable, excludedKeys)}"
      isFormTable
      @result="result"
      @checkChange="checkChange"
      @sortTableChange="sortTableChange"
      :devSearchFormRef="devSearchFormRef"
      v-model:query="props.searchTable.query">
    <template v-for="itemSlot in getSlot('dev-search-table')" :key="itemSlot" v-slot:[itemSlot]="temp">
      <slot :name="itemSlot" v-bind="temp"></slot>
    </template>
  </dev-search-table>
</template>

<style scoped lang="scss">

</style>
